import React,{Component,Fragment} from 'react'
import {Card,Table,Button,Modal,Form,Select,Radio,message} from 'antd'
import axios from './../../axios'
import Utils from './../../utils/utils'

export default class City extends Component {
    state = {
        showModal:false
    }
    params = {
        page:1
    }
    componentWillMount() {
        this.requestList()
    }
    requestList=() => {
        let _this = this
        axios.ajax({
            url:'/open_city',
            data:{
                params:{
                    page:this.params.page
                }
            }
        }).then(res => {
            if(res.code === 0) {
                this.setState({
                    dataSource:res.result.item_list.map((item,index) => {
                        item.key = index
                        return item
                    }),
                    pagination:Utils.pagination(res,(current) => {
                        //改变页数
                        _this.params.page = current
                        //重新请求
                        _this.requestList()
                    })
                })
            }
        })
    }
    handleClick=() => {
        this.setState({
            showModal:true
        })
    }

    handleSubmit = () => {
        const cityInfo = this.cityForm.props.form.getFieldsValue()
        console.log(cityInfo)
        //{city_id: "", mode: "1", op_mode: "1"}
        axios.ajax({
            url:'/open_city',
            data:{
                params:cityInfo
            }
        }).then(res => {
            if(res.code === 0) {
                message.info('操作成功')
            }
            this.setState({
                showModal:false
            })
            //假操作 刷新数据
            this.requestList()
        })
    }
    render() {
        const columns = [
            {
                title:"城市Id",
                dataIndex:"id"
            },
            {
                title:"城市名称",
                dataIndex:"name"
            },
            {
                title:"用车模式",
                dataIndex:"mode",
                render:(mode)=>{
                    return mode === 1? "停车点":"禁停区"
                }
            },
            {
                title:"营运模式	",
                dataIndex:"op_mode",
                render:(mode)=>{
                    return mode === 1? "加盟":"自营"
                }
            },
            {
                title:"授权加盟商",
                dataIndex:"franchisee_name"
            },
            {
                title:"城市管理员",
                dataIndex:"city_admins",
                render:(city_admins)=>{
                    return city_admins.map(item => {
                        return item.user_name
                    }).join(',')
                }
            },
            {
                title:"城市开通时间",
                dataIndex:"open_time"
            },
            {
                title:"操作时间",
                dataIndex:"update_time",
                render:(update_time)=>{
                    return Utils.formateDate(update_time)
                }
            },
            {
                title:"操作人",
                dataIndex:"sys_user_name"
            }
        ]
        return (
            <Fragment>
                <Card>
                    <FilterForm />
                </Card>
                <Card style={{marginTop:10}}>
                    <Button type="primary" onClick={this.handleClick}>开通城市</Button>
                </Card>
                <Table
                    style={{background:'#ffffff',marginTop:-3}}
                    bordered
                    columns={columns}
                    pagination={this.state.pagination}
                    dataSource={this.state.dataSource}
                >
                </Table>
                <Modal
                    title="开通城市"
                    visible={this.state.showModal}
                    onCancel={() => {
                        this.setState({
                            showModal:false
                        })
                    }}
                    onOk={() => {
                        this.handleSubmit()
                    }}
                >
                    <OpenCityForm wrappedComponentRef={(comp) => this.cityForm =comp }/>
                </Modal>
            </Fragment>
        )
    }
}
class FilterForm extends Component {
    onSearch = () => {
        const queryInfo = this.props.form.getFieldsValue()
        console.log(queryInfo)
    }
    onReset =() => {
        this.props.form.resetFields()
    }
    render() {
        const {getFieldDecorator} = this.props.form
        return (
            <Form layout="inline">
                <Form.Item label="城市">
                    {
                        getFieldDecorator('city_id',{
                            initialValue:""
                        })(
                            <Select style={{width:100}}>
                                <Select.Option value="">
                                    全部
                                </Select.Option>
                                <Select.Option value="1">
                                    北京市
                                </Select.Option>
                                <Select.Option value="2">
                                    天津市
                                </Select.Option>
                            </Select>
                        )
                    }
                </Form.Item>
                <Form.Item label="用车模式">
                    {
                        getFieldDecorator('mode',{
                            initialValue:""
                        })(
                            <Select style={{width:120}}>
                                <Select.Option value="">
                                    全部
                                </Select.Option>
                                <Select.Option value="1">
                                    指定停车点模式
                                </Select.Option>
                                <Select.Option value="2">
                                    禁停区模式
                                </Select.Option>
                            </Select>
                        )
                    }
                </Form.Item>
                <Form.Item label="运营模式">
                    {
                        getFieldDecorator('op_mode',{
                            initialValue:""
                        })(
                            <Select style={{width:80}}>
                                <Select.Option value="">
                                    全部
                                </Select.Option>
                                <Select.Option value="1">
                                    自营
                                </Select.Option>
                                <Select.Option value="2">
                                    加盟
                                </Select.Option>
                            </Select>
                        )
                    }
                </Form.Item>
                <Form.Item label="加盟商授权状态">
                    {
                        getFieldDecorator('auth_status',{
                            initialValue:""
                        })(
                            <Select>
                                <Select.Option value="">
                                    全部
                                </Select.Option>
                                <Select.Option value="1">
                                    已授权
                                </Select.Option>
                                <Select.Option value="2">
                                    未授权
                                </Select.Option>
                            </Select>
                        )
                    }
                </Form.Item>
                <Form.Item>
                    <Button type="primary" style={{margin:'0 20px'}} onClick={this.onSearch}>查询</Button>
                </Form.Item>
                <Form.Item>
                    <Button onClick={this.onReset}>重置</Button>
                </Form.Item>
            </Form>
        )
    }
}
FilterForm = Form.create({})(FilterForm)

class OpenCityForm extends Component {
    render() {
        const formItemLayout = {
            labelCol:{
                span:5
            },
            wrapperCol:{
                span:19
            }
        }
        console.log(this.props.form)
        const { getFieldDecorator } = this.props.form
        return (
            <Form>
                <Form.Item label="选择城市" {...formItemLayout}>
                    {
                        getFieldDecorator('city_id',{
                            initialValue:""
                        })(
                            <Select style={{width:100}}>
                                <Select.Option value="">
                                    全部
                                </Select.Option>
                                <Select.Option value="1">
                                    北京市
                                </Select.Option>
                                <Select.Option value="2">
                                    天津市
                                </Select.Option>
                            </Select>
                        )
                    }
                </Form.Item>
                <Form.Item label="运营模式" {...formItemLayout}>
                    {
                        getFieldDecorator('mode',{
                            initialValue:"1"
                        })(
                            <Radio.Group>
                                <Radio value="1">自营</Radio>
                                <Radio value="2">加盟</Radio>
                            </Radio.Group>
                        )
                    }
                </Form.Item>
                <Form.Item label="用车模式模式" {...formItemLayout}>
                    {
                        getFieldDecorator('op_mode',{
                            initialValue:"1"
                        })(
                            <Radio.Group>
                                <Radio value="1">指定停车点模式</Radio>
                                <Radio value="2">禁停区模式</Radio>
                            </Radio.Group>
                        )
                    }
                </Form.Item>
            </Form>
        )
    }
}
OpenCityForm=Form.create({})(OpenCityForm)